<template>
	<view>
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_login_bj"></view>

		<view class="loginBox">
			<view class="login">
				<view class="nav" :class="select_index == 1 ? 'password' : ''">
					<view class="li" :class="select_index == 0 ? 'active' : ''" @click="handleSelct(0)">
						验证码登录
						<image src="../../static/images/icon52.png"></image>
					</view>
					<view class="li" :class="select_index == 1 ? 'active' : ''" @click="handleSelct(1)">
						密码登录
						<image src="../../static/images/icon52.png"></image>
					</view>
				</view>
				<view class="loginMain">
					<view class="list">
						<view class="li">
							<view class="fl">
								<image src="../../static/images/icon53.png"></image>
							</view>
							<view class="fr">
								<input type="number" placeholder="请输入手机号" :focus="true" v-model="phone" maxlength="11">
							</view>
						</view>
						<view class="li" v-if="select_index == 0">
							<view class="fl">
								<image src="../../static/images/icon54.png"></image>
							</view>
							<view class="fr">
								<input type="number" placeholder="请输入验证码" v-model="code" maxlength="6">
								<view class="btn" v-if="showText==true" @click="getCode">获取验证码</view>
								<view class="btn" v-else>{{second}}s重新发送</view>
							</view>
						</view>
						<view class="li" v-else>
							<view class="fl">
								<image src="../../static/images/icon55.png"></image>
							</view>
							<view class="fr">
								<input type="text" placeholder="请输入密码" v-model="pwd" maxlength="30">
							</view>
						</view>
					</view>
					<view class="forgotText" v-if="select_index == 1">
						<text @click="goForget()">忘记密码</text>
					</view>
					<view class="btnList">
						<view class="li full" @click="handleSubmit()">登录</view>
<!--						<view class="li" @click="goRegister()">我要入驻</view>-->
					</view>
				</view>
			</view>
		</view>
		<!--<view class="login_content_big">
			<view class="login_content_box">
				<view class="login_content_bj">
&lt;!&ndash;					<image src="https://www.cccshansong.com/chong_weapp/login_bj1.png" mode=""></image>&ndash;&gt;
				</view>
				<view class="login_content_center_box">
					<view class="login_content_select_item_box" :class="select_index==0?'login_content_select_item_box_active':''" @click="handleSelct(0)">
						验证码登录
						<view class="login_content_select_item_heng" v-show="select_index==0"></view>
					</view>
					<view class="login_content_select_item_box" :class="select_index==1?'login_content_select_item_box_active':''" @click="handleSelct(1)">
						密码登录
						<view class="login_content_select_item_heng" v-show="select_index==1"></view>
					</view>
				</view>
				<view class="phone_login_box">
					<view class="phone_login_input_box">
						<view class="phone_login_input_name">手机号</view>
						<view class="phone_login_input_inp">
							<input type="number" :focus="true" v-model="phone" maxlength="11" placeholder="请输入手机号"/>
						</view>
					</view>
					<view class="phone_login_input_box" v-if="select_index==0">
						<view class="phone_login_input_name">验证码</view>
						<view class="phone_login_input_inp">
							<input type="number" style="width: 350rpx;" v-model="code" maxlength="6" placeholder="请输入验证码"/>
							<view class="phone_login_input_code" hover-class="hover_class"  v-if="showText==true" @click="getCode">获取验证码</view>
							<view class="phone_login_input_code" v-else>{{second}}s重新发送</view>
						</view>
					</view>
					<view class="phone_login_input_box"  v-if="select_index==1">
						<view class="phone_login_input_name">密码</view>
						<view class="phone_login_input_inp">
							<input type="password"  v-model="pwd" maxlength="30" placeholder="请输入密码"/>
						</view>
					</view>
					<view class="phone_login_btn" hover-class="hover_class" @click="handleSubmit()">登 录</view>
					<view class="phone_login_btn1" @click="goRegister()"  v-if="select_index==0">我要入驻</view>
					<view class="phone_login_btn2"  v-if="select_index==1">
						<view class="phone_login_btn2_item" style="margin-left: 10rpx;" @click="goForget()">忘记密码？</view>
						<view class="phone_login_btn2_item" style="margin-right: 10rpx;" @click="goRegister()">我要入驻</view>
					</view>
				</view>
			</view>
		</view>-->
		<wyb-popup ref="tuiTipPopup" type="center" height="544" width='640' radius="16" :showCloseIcon="false">
			<view class="xiuxi_popup_bj">
				<view style="height: 74rpx;"></view>
				<view class="xiuxi_popup_tip_img" style="width: 144rpx;height: 144rpx;">
					<image src="https://www.cccshansong.com/chong_weapp/pay_tip_icon.png"
						mode="">
				</view>
				<view class="xiuxi_popup_tip_text" style="margin-top: 30rpx;padding-left: 30rpx;padding-right: 30rpx;">
					当前账号异常，请联系客服</view>
			</view>
			<view class="pay_popup_box">
				<view class="pay_popup_btn" hover-class="hover_class" @click="handleTuiHide()">稍后再说</view>
				<view class="pay_popup_btn1" hover-class="hover_class" @click="handleTuiConfrim()">联系客服</view>
			</view>
		</wyb-popup>
		<view class="agree_xieyi_box">
			 <image src="../../static/images/icon05.png" mode=""  @click="handleAgree(2)" v-show="select_agree==1"></image>
			 <image src="https://www.cccshansong.com/chong_weapp/samll_select.png" mode=""  @click="handleAgree(1)" v-show="select_agree==0"></image>
			 我已阅读并同意  <text @click="goAgree(2)">《用户服务协议》</text>和<text @click="goAgree(1)">《隐私政策》</text>
		</view>
			<yk-authpup ref="authpup" :isNativeHead='false' type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	var jpushModule = uni.requireNativePlugin("JG-JPush")
	// #endif
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
			ykAuthpup,
		},
		data() {
			return {
				registerID:'',
				permissionID:'',
				kf_phone:'',
				select_agree:0,
				code:'',
				pwd:'',
				phone:'',
				second:60,
				showText:true,
				select_index:0,
				statusHeight: 0,
				config: {
					title: "", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#303133", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back3.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
				btn_status:true,
			};
		},
		onLoad(e) {
			var a = this
			a.statusHeight = uni.getSystemInfoSync().statusBarHeight + 14

			// #ifdef APP-PLUS
			let isLogin = uni.getStorageSync('isLogin')
			console.log('开始监听连接状态')
			if(isLogin){
				a.getConfig()
				a.getRegistrationID()
			}
			// #endif
		},
		methods: {
			getRegistrationID() {
				var a = this
				console.log('----------')
				jpushModule.getRegistrationID(result=>{
					let registerID = result.registerID
					console.log(registerID,'registerID')
					a.registerID = registerID
				})
			},
			handleAgree(){
				var a = this
				if(a.select_agree==0){
					a.select_agree=1
				}else{
					a.select_agree=0
				}
			},
			goForget(){
				uni.navigateTo({
					url:'/pages/user/forget'
				})
			},
			goAgree(index){
				if(index==1){
					uni.navigateTo({
						url:'/pages/user/articleDetail?id=1'
					})
				}else{
					uni.navigateTo({
						url:'/pages/user/articleDetail?id=2'
					})
				}
			},
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleSelct(index){
				this.select_index = index
			},
			handleTuiHide(){
				var a = this
				a.$refs.tuiTipPopup.hide();
			},
			handleTuiConfrim(){
				var a = this
				a.openAuth('CALL_PHONE')
			},
			//打开自定义权限目的弹框
			openAuth(permissionID){
				this.permissionID = permissionID;//这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
				setTimeout(()=>{
					this.$refs['authpup'].open();
				},500)
			},
			//用户授权权限后的回调
			changeAuth(){
				var a = this
				//这里是权限通过后执行自己的代码逻辑
				console.log('拨打电话权限已授权，可执行自己的代码逻辑了');
				a.$refs.tuiTipPopup.hide();
				var temp_str = '呼叫'+ a.kf_phone
				uni.showActionSheet({
					itemList: [temp_str],
					success: function(res) {
						console.log(res);
						if (res.tapIndex == 0) {
							uni.makePhoneCall({
								phoneNumber: a.kf_phone,
								success: (res) => {
									console.log('调用成功!')
								},
							})
						}
					}
				})
			},
			getConfig() {
				var a = this
				a.globalajax('common/getConfig', {
					value: 'mobile'
				}, 'GET', function(res) {
					console.log(res);
					uni.hideLoading()
					uni.stopPullDownRefresh()
					if (res.data.code == 200) {
						a.kf_phone = res.data.data
					} else {
						a.$showModal({
							title:'友情提示',
							content:res.data.msg,
							showCancel:false,
							confirmText:'我知道了',
							success: (res) => {
							}
						});
					}
				});
			},
			handleSubmit1(){
				var a = this
				a.$refs.tuiTipPopup.show();
			},
			handleSubmit(){
				var a = this
				if(a.select_index==0){
					if(a.phone==''){
						uni.showToast({
							title:'请输入手机号',
							icon:'none'
						})
					}else if(a.phone.length!=11){
						uni.showToast({
							title:'手机号不足11位',
							icon:'none'
						})
					}else if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(a.phone)){
						uni.showToast({
							title:'手机号格式不正确',
							icon:'none'
						})
					}else if(a.code==''){
						uni.showToast({
							title:'请输入验证码',
							icon:'none'
						})
					}else{
						if(a.select_agree==0){
							uni.showToast({
								title:'请先阅读并同意服务协议',
								icon:'none'
							})
						}else{
							if(a.btn_status){
								a.btn_status = false
								uni.showLoading({
									title:'加载中'
								})
								a.globalajax('login',{
									mobile:a.phone,
									code:a.code,
									registerID:a.registerID
								},'POST',function(res) {
										console.log(res);
										uni.hideLoading()
										setTimeout(()=>{
											a.btn_status = true
										},1500)
										if(res.data.code==200){
											uni.setStorageSync('isLogin', true)
											uni.setStorageSync('token', res.data.data.token);
											console.log("登录成功,已保存token和userId.??",a.registerID);
											uni.showToast({
												title: '登录成功',
												duration: 2000,
												icon: 'success'
											});
											setTimeout(() => {
												uni.reLaunch({
													url:'/pages/index/index'
												})
											}, 300)
										}else if(res.data.code==422){
											a.$refs.tuiTipPopup.show();
										}else{
											a.$showModal({
												title:'友情提示',
												content:res.data.msg,
												showCancel:false,
												confirmText:'我知道了',
												success: (res) => {
												}
											});
										}
									}
								);

							}
						}
					}
				}else{
					if(a.phone==''){
						uni.showToast({
							title:'请输入手机号',
							icon:'none'
						})
					}else if(a.phone.length!=11){
						uni.showToast({
							title:'手机号不足11位',
							icon:'none'
						})
					}else if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(a.phone)){
						uni.showToast({
							title:'手机号格式不正确',
							icon:'none'
						})
					}else if(a.pwd==''){
						uni.showToast({
							title:'请输入密码',
							icon:'none'
						})
					}else{
						if(a.select_agree==0){
							uni.showToast({
								title:'请先阅读并同意服务协议',
								icon:'none'
							})
						}else{
							if(a.btn_status){
								a.btn_status = false
								uni.showLoading({
									title:'加载中'
								})
								a.globalajax('passwordLogin',{
									mobile:a.phone,
									password:a.pwd,
									registerID:a.registerID
								},'POST',function(res) {
										console.log(res);
										uni.hideLoading()
										setTimeout(()=>{
											a.btn_status = true
										},1500)
										if(res.data.code==200){
											uni.setStorageSync('isLogin', true)
											uni.setStorageSync('token', res.data.data.token);
											console.log("登录成功,已保存token和userId.??",a.registerID);
											uni.showToast({
												title: '登录成功',
												duration: 2000,
												icon: 'success'
											});
											setTimeout(() => {
												uni.reLaunch({
													url:'/pages/index/index'
												})
											}, 300)
										}else if(res.data.code==422){
											a.$refs.tuiTipPopup.show();
										}else{
											a.$showModal({
												title:'友情提示',
												content:res.data.msg,
												showCancel:false,
												confirmText:'我知道了',
												success: (res) => {
												}
											});
										}
									}
								);


							}
						}
					}
				}

			},
			goRegister(){
				uni.navigateTo({
					url:'/pages/user/register'
				})
			},
			// 获取验证码
			getCode(){
				var a = this
				if(a.phone==''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
				}else if(a.phone.length!=11){
					uni.showToast({
						title:'手机号不足11位',
						icon:'none'
					})
				}else if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(a.phone)){
					uni.showToast({
						title:'手机号格式不正确',
						icon:'none'
					})
				}else{
					uni.showLoading({
						title:'加载中'
					})
					a.globalajax('sendSms',{
						phone:a.phone,
					},'GET',function(res) {
							console.log(res);
							uni.hideLoading()
							if(res.data.code==200){
								a.showText = false
								uni.showToast({
									title: '发送成功',
									icon:'none',
									duration: 2000
								});
								var interval = setInterval(() => {
								    let times = --a.second
								    a.second = times<10?'0'+times:times //小于10秒补 0
								}, 1000)
								setTimeout(() => {
								    clearInterval(interval)
								    a.second=60
								    a.showText = true
								}, 60000)
							}else{
								a.$showModal({
									title:'友情提示',
									content:res.data.msg,
									showCancel:false,
									confirmText:'我知道了',
									success: (res) => {
									}
								});
							}
						}
					);
				}
			},
		}
	}
</script>

<style lang="scss">
	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.pay_popup_box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 56rpx;

		.pay_popup_btn {
			width: 286rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border: 2rpx solid rgba(228, 231, 237, 1);
			border-radius: 16rpx;
			font-size: 30rpx;
			color: rgba(36, 40, 49, 1);
		}

		.pay_popup_btn1 {
			width: 286rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-radius: 16rpx;
			font-size: 30rpx;
			color: #fff;
			margin-left: 20rpx;
			background-color: rgba(255, 107, 0, 1);
		}
	}
	.xiuxi_popup_bj {
		width: 640rpx;
		height: 356rpx;
		background-image: url('https://www.cccshansong.com/chong_weapp/xiuxi_popup_bj.png');
		background-size: 100% 100%;

		.xiuxi_popup_tip_img {
			width: 144rpx;
			height: 144rpx;
			margin: 0 auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.xiuxi_popup_tip_text {
			text-align: center;
			font-weight: bold;
			color: rgba(36, 40, 49, 1);
			font-size: 40rpx;
			margin-top: 20rpx;
		}
	}
	.page_login_bj {
		width: 750rpx;
		height:800rpx;
		background-image: url('../../static/images/png05.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.agree_xieyi_box{
		position: fixed;
		bottom: 60rpx;
		width: 750rpx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #606266;
		padding-top: 40rpx;
		text{
			color: #418AFF;
			margin: 0 0rpx
		}
		image{
			width: 36rpx;
			height: 36rpx;
			margin-right: 8rpx;
		}
	}
	.login_content_big{
		/*width: 750rpx;*/
		height: 800rpx;
		position: relative;
		padding: 0 48rpx;
		box-sizing: border-box;
		.login_content_box{
			position: absolute;
			left: 0;
			top: -250rpx;
			width: 100%;
			height: 600rpx;
			background-color: #ecf2fb;
			border-radius: 40rpx 40rpx 0 0;
			.phone_login_box{
				padding-top: 48rpx;
				background-color: #ecf2fb;
				border-top-right-radius: 50rpx;
				.agree_xieyi_box{
					padding-top: 48rpx;
					padding-left: 30rpx;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #606266;
					text{
						color: #08CC93;
						margin: 0 0rpx
					}
					image{
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}
				}
				.phone_login_btn2{
					margin: 0 auto;
					margin-top: 16rpx;
					width: 702rpx;
					height: 88rpx;
					border-radius: 16rpx;
					background:#FFF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.phone_login_btn2_item{
						height: 88rpx;
						width: auto;
						line-height: 88rpx;
						color: #418aff;
						font-weight: 500;
					}
				}
				.phone_login_btn1{
					margin: 0 auto;
					margin-top: 16rpx;
					width: 702rpx;
					height: 88rpx;
					border-radius: 16rpx;
					background:#FFF;
					text-align: center;
					line-height: 88rpx;
					color: #418AFF;
					font-size: 30rpx;
					font-weight: 500;
				}
				.phone_login_btn{
					margin: 0 auto;
					margin-top: 80rpx;
					width: 702rpx;
					height: 88rpx;
					border-radius: 16rpx;
					background:#418AFF;
					text-align: center;
					line-height: 88rpx;
					color: #fff;
					font-size: 30rpx;
					font-weight: 500;
				}
				.phone_login_input_box{
					width: 702rpx;
					height: 88rpx;
					border-radius: 16rpx;
					background: #F5F6F8;
					margin: 0 auto;
					display: flex;
					margin-bottom: 32rpx;
					.phone_login_input_name{
						width: 108rpx;
						height: 88rpx;
						padding-left: 24rpx;
						line-height: 88rpx;
						color: #303133;
						font-size: 30rpx;
						font-weight: bold;
					}
					.phone_login_input_inp{
						width: 570rpx;
						height: 88rpx;
						position: relative;
						.reg_form_item_pwd{
							width: 60rpx;
							height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							top: 13rpx;
							right: 12rpx;
							image{
								width: 33rpx;
								height: 33rpx;
							}
						}
						.phone_login_input_code{
							position: absolute;
							top: 13rpx;
							right: 12rpx;
							color: rgba(65, 138, 255, 1);
							font-size: 28rpx;
							z-index: 90;
							width: 190rpx;
							height: 64rpx;
							text-align: center;
							line-height: 64rpx;
							border-radius: 12rpx;
							background-color: rgba(65, 138, 255, 0.1);
						}
						input{
							height: 88rpx;
							line-height: 88rpx;
							font-size: 30rpx;
						}
					}
				}
			}
			.login_content_center_box{
				position: absolute;
				height: 104rpx;
				width: 750rpx;
				display: flex;
				top: 0;
				left: 0;
				.login_content_select_item_box{
					height: 104rpx;
					width: 50%;
					text-align: center;
					line-height: 104rpx;
					position: relative;
					color: rgba(48, 49, 51, 1);
					font-size: 36rpx;
					font-weight: bold;
					.login_content_select_item_heng{
						background-color: #418AFF;
						width: 64rpx;
						height:6rpx;
						border-radius: 20rpx;
						position: absolute;
						bottom: 0;
						left: 154rpx;
					}
				}
				.login_content_select_item_box_active{
					height: 104rpx;
					width: 50%;
					background-color: #fff;
					border-radius: 40rpx 40rpx 0 0;
				}
			}
			.login_content_bj{
				width: 750rpx;
				height: 104rpx;
				background: #f5fbfa;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.loginBox{
		padding: 0 48rpx;
		margin-top: -320rpx;
		.login{
			/*background: #ecf2fb;*/
			border-radius: 48rpx;
			overflow: hidden;
			.nav{
				height: 98rpx;
				/*background: #ecf2fb;*/
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: url("../../static/images/png06.png") center no-repeat;
				background-size: cover;
				&.password{
					background: url("../../static/images/png06h.png") center no-repeat;
					background-size: cover;
				}
				.li{
					flex: 1;
					text-align: center;
					line-height: 96rpx;
					font-size: 36rpx;
					color: #666;
					position: relative;
					image{
						width: 43rpx;
						height: 15rpx;
						display: none;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
					&.active{
						color: #333;
						font-weight: bold;
						image{
							display: block;
						}
					}
				}
			}
			.loginMain{
				background: #ecf2fb;
				padding: 40rpx 36rpx 72rpx 36rpx;
				.list{
					.li{
						height: 100rpx;
						background: #fff;
						border-radius: 24rpx;
						padding: 0 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 32rpx;
						.fl{
							height: 40rpx;
							padding-right: 24rpx;
							border-right:1px solid #418AFF;
							image{
								width: 40rpx;
								height: 40rpx;
							}
						}
						.fr{
							padding-left: 24rpx;
							flex: 1;
							position: relative;
							input{
								width: 100%;
								font-size: 28rpx;
								color: #222;
							}
							.btn{
								position: absolute;
								right: 24rpx;
								top: 0;
								font-size: 24rpx;
								color: #418AFF;
							}
						}
					}
				}
				.forgotText{
					text-align: right;
					font-size: 24rpx;
					color: #418AFF;
					margin-top: 32rpx;
				}
				.btnList{
					margin-top: 64rpx;
					.li{
						margin-top: 32rpx;
						width: 100%;
						height: 100rpx;
						border-radius: 24rpx;
						box-sizing: border-box;
						border:2rpx solid #418AFF;
						color: #418AFF;
						font-size: 32rpx;
						text-align: center;
						line-height: 100rpx;
						&.full{
							background: #418AFF;
							border:none;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
